<template>
<div class="blackList">
  <div class="blacklist c-shadow">
      <div class="title">
          <span>黑名单企业查询</span>
      </div>
      <div class="oddsScreen">
        <p class="group searchInput">
          <el-input v-model="companyName" placeholder="请输入内容" class="search"></el-input>
          <el-button type="primary" class="btn-search" @click="search()">搜索</el-button>
        </p>
        <p class="group"><span class="labels">列入原因:</span>
          <span class="tags"><span v-for="(item,index) in reasons" :key="index" :class="item.isSel===true?'active':'normal'" @click="select('reason',item)">{{item.itemName}}</span></span>
        </p>
        <p class="group"><span class="labels">成立年限:</span>
          <span class="tags"><span v-for="(item,index) in createTimes" :key="index" :class="item.isSel===true?'active':'normal'" @click="select('createTime',item)">{{item.itemName}}</span></span>
        </p>
        <p class="group"><span class="labels">名单类型:</span>
          <span class="tags"><span v-for="(item,index) in listTypes" :key="index" :class="{active:(index === typeCheck)}" @click="select('listType',item)">{{item}}</span></span>
        </p>
        <p class="group"><span class="labels">列入时间:</span>
          <j-datePicker v-model="dateStart" :max="maxTime"></j-datePicker><span style="padding:0 20px;">至</span>
          <j-datePicker v-model="dateEnd" :min="dateStart" :max="curTime"></j-datePicker>
        </p>
        <p class="group" style="    margin-top: 20px;">
          <j-select class="select" v-model="selectTime" :initItems="selectTypes" :selectedIndex="selectIndex"></j-select>
          <span class="companyCount">共 <span style="color:red;font-size:16px;">{{company}}</span> 家企业,公有标签 {{publicCompany}} 家,私有标签 {{privateCompany}} 家</span>
          <el-button type="primary" class="btn-search companyImport" @click="blacklistImport">企业黑名单导入</el-button>
          <a href="" download="" class="Templete" title="请按照模板样式上传企业列表">导入模板.xls</a>
        </p>
      </div>
      <div class="lists">
        <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0" v-if="lists.length>0">
        <thead>
          <th>企业信息</th>
          <th>列入原因</th>
          <th>案号</th>
          <th>执行法院</th>
          <th>列入时间</th>
          <th>导入用户</th>
          <th>导入时间</th>
          <th>类型</th>
        </thead>
        <tr v-for="(item,index) in lists" :key="index">
          <td>
            <router-link tag="a" target="_blank" :to="{path:'/entdetail',query:{name:item.企业名称,entid:item.企业ID}}">
              <span>{{item.企业名称}}</span>
            </router-link>
          </td>
          <td class="ent-emphasis">{{item.列入原因}}</td>
          <td class="text-center">{{item.案号}}</td>
          <td class="text-center">{{item.执行法院}}</td>
          <td class="text-center">{{item.列入时间}}</td>
          <td class="text-center">{{item.导入用户}}</td>
          <td class="text-center">{{item.导入时间}}</td>
          <td class="text-center">{{item.类型}}</td>
        </tr>
      </table>
      </div>
  </div>
  <div class="block pagination fr">
    <el-pagination v-if="total>listParams.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listParams.pageNum"
      :page-size="listParams.pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>

</template>
<script>
import { blackList as api } from '../../api'
import { jDatePicker, jSelect } from '../../components'
export default {
  name: 'blacklist',
  components: { jDatePicker, jSelect },
  data() {
    return {
      companyName: '',
      company: 0,
      privateCompany: 0,
      publicCompany: 0,
      dateStart: '',
      dateEnd: '',
      lists: [],
      total: 0,
      typeCheck: 0,
      selectTime: '一个月内',
      selectIndex: 0,
      reason: '',
      reasons: [
        {itemName: '不限', isSel: true, flag: ''},
        {itemName: '非法吸收公众存款罪', isSel: false, flag: 'a'},
        {itemName: '集资诈骗罪', isSel: false, flag: 'b'},
        {itemName: '其他', isSel: false, flag: 'c'}
      ],
      createTime: '',
      createTimes: [
        {itemName: '不限', isSel: true, flag: ''},
        {itemName: '1年以下', isSel: false, flag: 'a'},
        {itemName: '1-3年', isSel: false, flag: 'b'},
        {itemName: '3-5年', isSel: false, flag: 'c'},
        {itemName: '5到10年', isSel: false, flag: 'd'},
        {itemName: '10年以上', isSel: false, flag: 'e'}
      ],
      listType: '不限',
      listTypes: [
        '不限', '公有', '私有'
      ],
      listParams: {
        pageNum: 1,
        pageSize: 10
      },
      selectTypes: [
        '一个月内', '三个月内', '六个月内', '一年内'
      ],
      countSelect:1,
      selectTypeMap: [
        1, 3, 6, 12
      ]
    }
  },
  computed: {
    maxTime() {
      if ((new Date().valueOf() - new Date(this.dateEnd).valueOf()) > 0) {
        return this.dateEnd
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    }
  },
  watch: {
    selectTime(value) {
      this.countSelect=this.selectTypeMap[this.selectTypes.indexOf(value)]
      let params = this.getParams()
      this.getList(params)
    }
  },
  methods: {
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    getParams() {
      let params = Object.assign(this.listParams, {})
      if (this.dateStart!=='') {
        params['dateStart'] = this.dateStart
      } else {
        delete params['dateStart']
      }
      if (this.dateEnd!=='') {
        params['dateEnd'] = this.dateEnd
      } else {
        delete params['dateEnd']
      }
      if (this.countSelect>0) {
        params['countSelect'] = this.countSelect
      } else {
        delete params['countSelect']
      }
      if (this.reason!=='') {
        params['reason'] = this.reason
      } else {
        delete params['reason']
      }
      if (this.createTime!=='') {
        params['createTime'] = this.createTime
      } else {
        delete params['createTime']
      }
      if (this.listType!=='') {
        params['listType'] = this.listType
      } else {
        delete params['listType']
      }
      return params
    },
    search() {
      let params = {
        name: this.companyName
      }
      api.selectCompany(params).then(rtn => { this.lists=rtn.data })
    },
    // 导入黑名单企业
    blacklistImport() {
      let importUrl = 'xxx' // 导入地址
      let fileInput = document.createElement('input')
      document.body.appendChild(fileInput)
      fileInput.setAttribute('type', 'file')
      fileInput.setAttribute('src', importUrl)
      fileInput.click()
      fileInput.parentNode.removeChild(fileInput)
      let params = Object.assign(this.listParams, {countSelect:1, listType:'不限'})
      this.getList(params)
    },
    // 选择列入原因、成立年限及企业类型
    select(textType, val) {
      switch (textType) {
        case 'reason':
          if (val.itemName==='不限') {
            this.reasons.forEach(item => {
              item.isSel=false
              if (item.itemName===val.itemName) {
                item.isSel=true
              }
            })
            this.reason = ''
          }
          if (val.itemName!=='不限') {
            this.reasons[0].isSel=false
            val.isSel = !val.isSel
            let middleArr = []
            middleArr=this.reasons.filter(item => item.isSel===true).map(item => item.flag)
            this.reason = middleArr.join(',')
          }
          break
        case 'createTime':
          if (val.itemName==='不限') {
            this.createTimes.forEach(item => {
              item.isSel=false
              if (item.itemName===val.itemName) {
                item.isSel=true
              }
            })
            this.createTime = ''
          }
          if (val.itemName!=='不限') {
            this.createTimes[0].isSel=false
            val.isSel = !val.isSel
            let middleArr = []
            middleArr=this.createTimes.filter(item => item.isSel===true).map(item => item.flag)
            this.createTime = middleArr.join(',')
          }
          break
        case 'listType':
          this.typeCheck = this.listTypes.indexOf(val)
          this.listType = val
          break
        default:
          break
      }
      let params = this.getParams()
      this.getList(params)
    },
    getList(params) {
      api.getBlackList(params).then(rtn => { this.lists = rtn.data })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.blackList{
  width: 100%;
  height: 100%;
    .blacklist{
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    .title {
      padding: 20px 0;
      height: 30px;
      font-size: 24px;
      text-align: center;
    }
    .oddsScreen{
      padding:0 20px;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .group {
        padding: 5px 0;
        height: 37px;
        line-height: 37px;
        flex:1;
        display: flex;
        .companyCount {
          margin-left: 5%;
          font-size: 12px;
          line-height: 55px;
        }
        .companyImport {
          margin-left: 20%
        }
        .Templete {
          line-height: 50px;
          color: #1c86d1;
          font-size: 16px;
          margin-left: 20px
        }
        .Templete~span{
          line-height: 55px;
          margin-left: 5px
        }
        .labels {
          width: 10%;
          height: 100%;
          font-size: 16px;
        }
        .tags {
          flex: 1;
          font-size: 14px;
          display: flex;
          span {
            width: auto;
            height: 20px;
            line-height: 20px;
            padding: 5px 15px;
            margin: 7px 30px 0 0;
            display: block;
            border-radius: 5px;
            cursor: pointer;
          }
          .normal {
            color:#3cafff;
            background: #e2f1ff;
          }
          .active {
            background: #ffe5ce;
            color: #ff7200;
          }
        }
      }
      .searchInput,{
        justify-content: center;
        .search{
          width: 60%;
          padding-right: 30px;
        }
        .btn-search{
          font-size: 14px;
        }
      }
    }
    .lists{
      padding: 0 20px 20px;
      flex: 1;
      table{
        width: 100%;
        height: 97%;
        margin-top: 10px;
        border-radius: 3px;
        thead{
          th{
            font-weight: 800;
          }
        }
      }
    }
  }
  .pagination{
    transform: translateY(20px)
  }
}
</style>


// WEBPACK FOOTER //
// src/view/blacklist/blacklist.vue